.octotree-show {
  .octotree_gitlab_only {
    display: none;
  }

  .octotree_gitlab_sidebar {
    a.octotree_toggle {
      top: 11px;
      right: 5px;
      &:not(.octotree_loading) > span:after {
        content: '\f104';
      }
    }
  }

  .content-wrapper {
    transition-duration: 0.3s;
  }
}

.octotree_gitlab_sidebar {
  transition-duration: .3s;
  padding-top: 58px;
  background-color: white;

  .octotree_gitlab_only {
    display: block;
  }

  .octotree_views {
    .octotree_view {
      .octotree_view_header {
        height: 50px;
        font-size: 20px;
        background-image: none;
        background-color: #f7f8fa;
        border-bottom: 1px solid #dce0e6;
      }

      .octotree_help {
        & > span {
          font: normal normal 15px FontAwesome;
          color: black;
        }
        & > span:before {
          content: '\f059';
        }
      }
    }

    .octotree_treeview {
      .octotree_header_repo {
        font-size: 15px;
        margin-top: -3px;
      }
      .octotree_header_repo:before {
        font-family: FontAwesome;
        content: '\f015';
        color: #333c48;
      }
      .octotree_header_branch {
        font-size: 13px;
      }
      .octotree_header_branch:before {
        font-family: FontAwesome;
        content: '\f126';
      }
      .jstree-icon.tree:before {
        content: '\f07b';
        color: #333c48;
      }
      .jstree-icon.blob:before {
        content: '\f0f6';
        color: #333c48;
      }
      .jstree-node.jstree-leaf:hover {
        .jstree-icon.blob:before {
          content: '\f019';
          color: #333c48;
        }
      }
      .jstree-icon.commit:before {
        content: '\f187';
        color: #333c48;
      }
      .jstree-anchor {
        color: #333c48 !important;
        & > span {
          color: black;
        }
      }
      .jstree-default {
        .jstree-wholerow-hovered {
          background: #f8eec7;
        }
        .jstree-wholerow-clicked {
          background: #e7e9ed;
        }
      }
      .jstree-icon.tree, .jstree-icon.blob, .jstree-icon.commit {
        font: normal normal 16px FontAwesome;
      }
    }
  }

  a.octotree_toggle, a.octotree_opts {
    color: #313236 !important;
  }

  a.octotree_opts {
    top: 17px;
    right: 38px;

    & > span {
      font: normal normal 16px FontAwesome;
    }
    & > span:before {
      content: '\f013';
    }
    &:hover, &.selected {
      color: #4183C4 !important;
    }
  }

  a.octotree_toggle {
    top: 10px;

    & > span {
      font: normal normal 16px FontAwesome;
      font-weight: bold;
    }
    &:not(.octotree_loading) > span:after {
      content: '\f105';
    }
  }
}
